<template>

  <div>

    <Card>
      <Tabs value="name1">
        <TabPane label="取消规则" name="name1">
          <div class="p-relative" style="padding-top: 10px;">
            <div @click="refresh" class="p-absolute refresh-btn">
              <Icon size='24' type="md-refresh" />
            </div>
            <div class="flex-box search-area">
              <div class="flex-item search-btn">
                <Button type="warning" @click='create'>添加</Button>
              </div>
            </div>
          </div>
          <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'"
            border ref="tables" editable search-place="top">
            <template slot-scope="{ row, index }" slot="action">
              <div class="flex-box flex-center flex-margin">
                <Button type='warning' @click="edit(row, index)" size='small'>编辑</Button>
                <Button type='error' @click="del(row, index)" size='small'>删除</Button>
              </div>
            </template>
          </Table>
          <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
            show-elevator @on-change="changepage"></Page>
        </TabPane>

        <TabPane label="商家抽佣设置" name="name2">
          <Table :columns="tableOption1" :data="data.list1" border :no-data-text="loadingText ? loadingText : '暂无数据'"
            border ref="tables" editable search-place="top">
            <template slot-scope="{ row, index }" slot="type">
              <span v-if="row.type==1">平台卡</span>
              <span v-if="row.type==2">商家卡</span>
              <span v-if="row.type==3">微信</span>
            </template>
            <template slot-scope="{ row, index }" slot="rate_discount">
              {{row.rate_discount}}{{row.type==1?'折':'%'}}
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <div class="flex-box flex-center flex-margin">
                <Button type='warning' @click="editRate(row, index)" size='small'>编辑</Button>
              </div>
            </template>
          </Table>
          <Page class="foot-page" :current='page.current1' :total="page.total1" :page-size="page.pageSize1" show-total
            show-elevator @on-change="changepage1"></Page>
        </TabPane>
      </Tabs>
    </Card>


    <!-- 添加弹窗 -->
    <Modal v-model="createModal" :title="createTitle" width='500'>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="开始时间" prop="start_minute">
          <Input v-model="formValidate.start_minute" placeholder="请设置开始时间 单位:分 "></Input>
        </FormItem>
        <FormItem label="结束时间" prop="end_minute">
          <Input v-model="formValidate.end_minute" placeholder="请设置结束时间 单位:分"></Input>
        </FormItem>
        <FormItem label="扣费比例" prop="ratio">
          <Input v-model="formValidate.ratio" placeholder="请设置扣费比例  单位 百分比 例:5% 则填5 0表示不扣费"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click='createModal=false'>取消</Button>
        <Button type="warning" @click="save('formValidate')" :disabled="isDisable" :loading="isLoading">保存</Button>
      </div>
    </Modal>

    <!-- 商家抽佣弹窗 -->
    <Modal v-model="createRateModal" :title="createRateTitle" width='500'>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="类型" prop="type">
          <RadioGroup v-model="formValidate.type">
            <Radio :label="item.value" disabled v-for="(item,index) in ratioType">{{item.name}}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="比例或折扣" prop="rate_discount">
          <Input v-model="formValidate.rate_discount" placeholder="请设置扣费比例或折扣  单位 百分比 例:5% 则填5 0表示不扣费"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click='createRateModal=false'>取消</Button>
        <Button type="warning" @click="saveRatio('formValidate')" :disabled="isDisable" :loading="isLoading">保存</Button>
      </div>
    </Modal>


    <!-- 删除弹窗 -->
    <Modal v-model="delModal" title="提示" width="250">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定删除该数据吗？
      </p>
      <div slot="footer">
        <Button @click='delModal=false'>取消</Button>
        <Button type="primary" @click='confirmDel'>确定</Button>
      </div>
    </Modal>

  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'

  // 接口
  import {
    getRuleList,
    addRule,
    putRule,
    delRule,
    getRateList,
    saveRatio

  } from '@/api/setting-group/setting'
  import {
    tableOption
  } from '../../../data/setting-group/setting.js'
  import Tables from '_c/tables'

  import {
    getTableData
  } from '@/api/data'

  export default {
    name: 'tables_page',
    components: {
      Tables

    },
    created() {
      let _this = this
      this.$nextTick(function() {
        // 权限校验
        _this.role_add = permission(this.roles, 'setting/addRule')
        _this.role_edit = permission(this.roles, 'setting/editRule')
        _this.role_del = permission(this.roles, 'setting/deleteRule')

      })

      this.getRuleList();
      this.getRateList();
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({
        roles: state => state.user.roles
      })

    },
    data() {


      return {
        // 权限标识
        role_add: false,
        role_edit: false,
        role_del: false,
        delModal: false,
        createModal: false,
        createTitle: '添加',
        createRateModal: false,
        createRateTitle: '添加',
        isAdd: true, // 新增true,修改false

        loadingText: '',
        tableOption: tableOption,
        page: {
          current: 1,
          total: 0,
          pageSize: 10,
          current1: 1,
          total1: 0,
          pageSize1: 10,
        },
        data: {
          list: [],
          list1: [],
        },
        formValidate: {
          start_minute: '',
          end_minute:'',
          ratio: '0',
          rate_discount: '',
          type: 1

        },
        isDisable: false, // 新增时提交按钮点击状态
        isLoading: false, // 新增时提交按钮loading状态

        ruleValidate: {
          minute: [{
            required: true,
            message: '请设置剩余时间',
            trigger: 'blur'
          }],
          ratio: [{
            required: true,
            message: '请设置扣费比例',
            trigger: 'blur'
          }]

        },
        rowId: 0,
        tableOption1: [{
            title: 'ID',
            key: 'id',
            width: '70'
            // sortable: true
          },
          {
            title: '类型',
            key: 'type',
            slot: 'type',
          },
          {
            title: '比例或折扣',
            key: 'rate_discount',
            slot: 'rate_discount',
          },

          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center',

          }
        ],
        ratioType: [{
            name: '平台卡',
            value: 1,
          },
          {
            name: '商家卡',
            value: 2,
          },
          {
            name: '微信',
            value: 3,
          }
        ]

      }
    },
    methods: {
      // 列表数据
      getRuleList() {
        let _this = this
        let params = {
          page: this.page.current,
        }

        getRuleList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.page.total = result.total
            _this.page.pageSize = result.size

          }
        }).catch(function(error) {
          // 异常

        })
      },
      getRateList() {
        let _this = this
        let params = {
          page: this.page.current1,
        }

        getRateList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list1 = result.list
            _this.page.total1 = result.total
            _this.page.pageSize1 = result.size

          }
        }).catch(function(error) {
          // 异常

        })
      },
      changepage(e) {
        this.page.current = e;
        this.getRuleList();

      },
      changepage1(e) {
        this.page.current1 = e;
        this.getRateList();

      },
      // 刷新
      refresh() {

        this.getRuleList()
      },
      // 新增
      create() {

        if (!this.role_add) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.createModal = true

        this.createTitle = '添加规则'
        this.isAdd = true
        this.formValidate = {} // 表单重置


        this.handleReset('formValidate') // 验证重置
      },
      // 修改
      edit(row) {
        if (!this.role_edit) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.createModal = true
        this.createTitle = '编辑规则'
        this.isAdd = false
        this.formValidate = {} // 表单重置
        this.formValidate = JSON.parse(JSON.stringify(row))
        this.formValidate.ratio = this.formValidate.ratio.toString()
        this.formValidate.minute = this.formValidate.minute.toString()
        this.handleReset('formValidate') // 验证重置
      },
      handleReset(name) {
        this.$refs[name].resetFields()
      },
      save(name) {

        let _this = this

        this.$refs[name].validate((valid) => {
          if (valid) {
            if (_this.isAdd) {
              // 新增
              let obj = {
                start_minute: _this.formValidate.start_minute,
                 end_minute: _this.formValidate.end_minute,
                ratio: _this.formValidate.ratio,
              }

              // 新增接口
              addRule(obj).then(res => {
                if (res.data.status == 1) {

                  _this.createModal = false
                  _this.getRuleList() // 重新刷新数据
                  _this.$Message.success('操作成功')
                } else {
                  _this.createModal = false
                  // axios响应拦截
                }
              }).catch(function(error) {
                // 异常
                _this.createModal = false
                console.log(error)
              })
            } else {
              // 修改

              let obj = {
                id: _this.formValidate.id,
                start_minute: _this.formValidate.start_minute,
                end_minute: _this.formValidate.end_minute,
                ratio: _this.formValidate.ratio,
              }

              // 修改接口
              putRule(obj).then(res => {
                if (res.data.status == 1) {

                  _this.createModal = false

                  _this.getRuleList() // 重新刷新数据
                  _this.$Message.success('操作成功')
                } else {

                }
              }).catch(function(error) {
                // 异常
                console.log(error)
              })
            }

          } else {
            this.$Message.error('请输入必填项!')
          }
        })
      },

      // 删除
      del(row) {
        if (!this.role_del) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.delId = row.id
        this.delModal = true
        // 删除接口
      },
      confirmDel() {
        let _this = this
        let obj = {
          id: this.delId
        }
        delRule(obj).then(res => {
          if (res.data.status == 1) {

            _this.delModal = false
            _this.$Message.success('操作成功')
            _this.getRuleList() // 重新刷新数据
          } else {
            _this.delModal = false

          }
        }).catch(function(error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
      },
      editRate(row) {

        this.createRateTitle = '编辑'

        this.formValidate = {}
        this.formValidate.id = row.id
        this.formValidate.type = parseInt(row.type)
        this.formValidate.rate_discount = row.rate_discount

        this.createRateModal = true;

      },
      saveRatio() {
        let _this = this;
        let obj = {
          id: _this.formValidate.id,
          type: _this.formValidate.type,
          rate_discount: _this.formValidate.rate_discount,
        }

        // 修改接口
        saveRatio(obj).then(res => {
          if (res.data.status == 1) {
            _this.createRateModal = false

            _this.getRateList() // 重新刷新数据
            _this.$Message.success('操作成功')
          } else {

          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      }
    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
